import React, { Component } from 'react';
import styles from './index.module.scss'

import img from "../../assets/images/haimian.png"
import product_img from "../../assets/images/product.png"

class index extends Component {
    constructor(props) {
        super(props)
        this.my_cart_list = React.createRef();
    }
    state = {
        num: 1,
    }

    handleClick = (step) => {
        // 当点击减时候，需要判断数量是否已经为零，为零的情况在减则删掉该商品列
        if (this.state.num === 0) {
            this.my_cart_list.current.remove()
            this.setState({
                num: 0
            })
        }
        this.setState({
            num: this.state.num + step
        })


    }

    render() {
        var sum = this.state.num * 68
        if (this.state.num <= 0) {
            console.log(1)
            sum = this.state.num * 0
        }

        return (
            <div>
                <div className={styles.header}>
                    <div className={styles.h_left}>{'<'}</div>
                    <div className={styles.h_middle}>购物车</div>
                    <div className={styles.h_right}>编辑</div>
                </div>
                {/* 商品列表 */}
                <div className={styles.shop_list}>
                    <div className={styles.shop_list_header}>
                        <span></span>
                        <img className={styles.userHead} src={img} alt='404'></img>
                        <span className={styles.userName}>海绵宝宝</span>
                    </div>
                    <div className={styles.shop_list_content} ref={this.my_cart_list}>
                        <div className={styles.shop_content_left}>
                            <img src={product_img} alt="" />
                        </div>
                        <div className={styles.shop_content_right}>
                            <div className={styles.list_name}>首款海绵包包</div>
                            <div className={styles.list_type}>颜色:黑色</div>
                            <div className={styles.list_price}>
                                <div>￥68.00</div>
                                <div>
                                    <span onClick={this.handleClick.bind(this, -1)}>-</span>
                                    <span>{this.state.num}</span>
                                    <span onClick={this.handleClick.bind(this, 1)}>+</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 结算模块 */}
                <div className={styles.pay_list}>
                    <div>
                        <span>合计:</span>
                        <span>￥{sum}</span>
                    </div>
                    <div>去结算</div>
                </div>
            </div>
        );
    }
}

export default index;
